<template>
  <div class="main-content loan-list">
    <div class="mc-left_title">
      <span>支用列表</span>
    </div>
    <div class="tsd-base">
      <div class="tb-top">
<!--        <div class="ai-item">
          <span class="svg-money">开始日期</span>
          <el-date-picker
              v-model="timeBegin"
              style="width: 140px"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="ai-item">
          <span class="svg-money">截止日期</span>
          <el-date-picker
              v-model="timeEnd"
              style="width: 140px"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>-->
        <div class="ai-item">
          <span>当前在贷金额：</span>
          <span>¥</span>
          <span style="font-weight: bold;font-size: 18px">{{vMoney.decode(balanceSum,2)}}</span>
        </div>
<!--        <div class="ai-item">
          <span class="svg-money">还款状态</span>
          <el-select v-model="loanType" clearable placeholder="请选择" style="width: 140px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button class="fir-btn" @click="searchList" icon="el-icon-search">搜索</el-button>-->
      </div>
      <div class="tb-middle">
        <el-table :data="tableData" v-loading="loading" fit highlight-current-row element-loading-text="数据加载中">
          <el-table-column
              prop="index"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="drawdownNo"
              label="支用流水">
          </el-table-column>
          <el-table-column
              label="支用时间">
            <template slot-scope="scope">
              <span>{{ scope.row.drawdownDate | $_changeTime()}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="drawdownAmount"
              label="支用金额">
          </el-table-column>

          <el-table-column
              prop="repayStatus"
              label="还款状态">
            <template slot-scope="scope">
              <span v-for="item in options">
                <template v-if="scope.row.drawdownType==item.value">
                  {{item.label}}
                </template>
              </span>
            </template>
          </el-table-column>

          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <a style="color: #e3b304" @click="repayRecord(scope.row)">还款记录</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page"
                     :page-sizes="[5,10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import {zsLoanList} from '@/api/plat/plat';
import {mapState} from "vuex";
export default {
  name: "platLoan",
  data() {
    return {
      loanType: '',
      options: [{
        value: '1',
        label: '已还款'
      },{
        value: '2',
        label: '放款失败'
      },{
        value: '3',
        label: '审批中'
      },{
        value: '4',
        label: '部分还款'
      },{
        value: '5',
        label: '未还款'
      },{
        value: '6',
        label: '已逾期'
      }],
      total: 0,
      listQuery: {
        page: 0,
        limit: 10
      },
      timeBegin: '',
      timeEnd: '',
      loading: false,
      tableData: [],

      balanceSum:''
    };
  },
  props:['fundCode'],

  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  mounted(){
    this.getLoanList();
  },
  methods: {
    getLoanList(){
      let _this = this;
      let info = !!this.user.user?this.user.user:{uscCode:""};
      this.loading = true;
      zsLoanList({
        "ascs": [],
        "descs": [],
        "limit": this.listQuery.limit,
        "current": this.listQuery.page,
        "fundCode": this.fundCode,
        "startDate": !!this.timeBegin?this.parseTime(this.timeBegin,'{y}-{m}-{d}'):'',
        "endDate": !!this.timeEnd?this.parseTime(this.timeEnd,'{y}-{m}-{d}'):'',
        "uscCode": info.uscCode
      }).then(response => {
        if(response.code === 200){
          _this.balanceSum = response.data.balanceSum;
          _this.tableData = response.data.drawbackDrawdowns?response.data.drawbackDrawdowns:[];
          _this.setTableKey();
          _this.total = response.data.total;
        }
        _this.loading = false;
        _this.$emit('completed');
      }).catch(err => {
        _this.loading = false;
        _this.$emit('completed');
      });
    },
    setTableKey(){
      let _this = this;
      for(let i=0;i<_this.tableData.length;i++){
        _this.tableData[i].index = i+1;
      }
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.listQuery.page = 1;
      this.getLoanList();
    },
    handleCurrentChange(val){
      this.listQuery.page = val;
      this.getLoanList();
    },
    repayRecord(e){
      this.$emit('back',e)
    },
    searchList(){
      this.getLoanList();
    },
    /***
     * 时间处理
     * 工具函数
     * @param time  cFormat
     * @returns {string|null}
     */
    parseTime(time, cFormat) {
      if (arguments.length === 0) {
        return null;
      }
      if (time === undefined || time === null)
        return '';

      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
      let date;
      if (typeof time == 'object') {
        date = time;
      } else {
        if (('' + time).length === 10) time = parseInt(time) * 1000;

        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      };
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
        if (result.length > 0 && value < 10) {
          value = '0' + value;
        }
        return value || 0;
      });
      return time_str;
    }
  }
}
</script>

<style lang="scss">
.loan-list {
  background: white;
  margin-top: 0;
  width: 100%;

  min-height: calc(100vh - 90px);
  .tb-middle{
    margin: 0 auto 20px auto;
    padding: 0 20px;
    .ap-title{
      margin-bottom: 15px;
      display: block;
      font-size: 18px;
    }
    .el-table__header th {
      background-color: #FF9B00;
      color: white;
    }
  }
  .tb-top{
    height: 50px;
    /*margin: 16px 0;*/
    padding: 0 20px;
    .fir-btn {
      width: 93px;
      height: 40px;
      padding-top: 10px;
      float: right;
      margin-right: 0;
      border-radius: 20px;
      color: #FFA01D;
    }
    .fir-btn:focus, .fir-btn:hover{
      background-color: inherit;
      color: #FFA01D;
    }
    .ai-item{
      width: 45%;
      float: left;
      text-align: left;
      line-height: 40px;
      .search-btn{
        float: right;
        background: #FFA01D;
      }
    }
    .svg-money{
      .svg-icon{
        font-size: 20px;
      }
    }
  }
}
</style>
